<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2023-01-13 13:35:59
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-21 22:47:44
 * @FilePath: /dcollege/src/views/schedule/schedule.vue
 * @Description: 我的日程
 * 
 * Copyright (c) 2023 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <div class="schedule-bg">
    <var-app-bar title="我的日程" title-position="center">
      <template #left>
        <var-button
          @click="goBack"
          color="transparent"
          text-color="#ffffff"
          round
          text
        >
          <var-icon name="chevron-left" :size="24" />
        </var-button>
      </template>
    </var-app-bar>
    <div>
      <var-date-picker v-model="date" @change="change" />
    </div>
    <div class="todoList">
      <doList v-for="item in toDo" v-bind="item" />
    </div>
    <!-- 添加日程 -->
    <div class="add-todo">
      <var-button
        @click="goAddTodo"
        color="rgb(48,127,252)"
        text-color="#ffffff"
        round
      >
        <var-icon name="plus" :size="36" />
      </var-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { useUserScheduleStore } from "../../stores/schedule";
import dayjs from "dayjs";

const schedule = useUserScheduleStore();
const { nowScheduleList } = storeToRefs(schedule);
const { getScheduleList } = schedule;
const router = useRouter();

function goBack() {
  router.push("/home")
}

const date = ref(dayjs().format("YYYY-MM-DD HH:mm:ss")); // 日期初始化
const toDo = ref(nowScheduleList.value || []); // 日程列表初始化
const changeTime = ref("");
// 日期切换时查询日程
function change(date: string | string[]) {
  try {
    changeTime.value = dayjs(date as string).format("YYYY-MM-DD HH:mm:ss");
    const timeStamp = dayjs(date as string).valueOf();
    getScheduleList(timeStamp);
  } catch (error) {
    console.log((error as Error).message);
  }
}
try {
  schedule.userSchedule();
} catch (error) {
  console.log((error as Error).message);
}
// 页面载入时获取当前日期的日程
(async () => {
  try {
    const date = dayjs().valueOf();
    await getScheduleList(date);
  } catch (error) {
    console.log((error as Error).message);
  }
})();
// 添加日程
function goAddTodo() {
  router.push({ path: "/addToDo", query: { nowDate: changeTime.value } });
}
// 订阅nowScheduleList
schedule.$subscribe((mutations, state) => {
  toDo.value = state.nowScheduleList;
});
</script>

<style lang="less" scoped>
.schedule-bg {
  position: absolute;
  background: #fff;
  overflow: auto;
  white-space: nowrap;
  width: 100%;
  height: 100%;
}
.todoList {
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
  padding-right: 1rem;
}
.add-todo {
  position: fixed;
  bottom: 5rem;
  right: 1rem;
}
</style>
